﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="images/s3-4-1/css/style.css" media="screen" type="text/css" />
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s3-3-1/s3-3-1-bg.jpg');
            background-repeat: no-repeat;
            width: 1920px;
            height: 1080px;
        }

        em {
            color: #fff100;
            font-style: normal;
            font-size: 18pt;
            vertical-align: middle;
            margin-left: 5px;
        }

        .countText {
            color: #fff100;
            font-size: 42pt;
            font-weight: bold;
        }

        #table {
            margin-top: 0px;
            margin-left: 10px;
        }

            #table .row {
                width: 510px;
                height: 55px;
            }
                #table .row .col1 {
                    float: left;
                    font-size: 24px;
                    margin-left: 9px;
                    width: 32px;
                    height: 32px;
                    text-align: center;
                    margin-top: 10px;
                    background-image: url('images/s3-3-1/numberbg.png');
                    background-repeat: no-repeat;
                }

                #table .row .col2 {
                    float: left;
                    font-size: 18px;
                    height: 45px;
                    width: 265px;
                    text-align: left;
                    margin-left: 15px;
                    margin-top: 10px;
                }

                #table .row .col2r2 {
                    float: left;
                    font-size: 18px;
                    height: 45px;
                    width: 265px;
                    text-align: left;
                    margin-left: 15px;
                    margin-top: 2px;
                }

                #table .row .col3 {
                    float: left;
                    font-size: 24px;
                    height: 45px;
                    width: 170px;
                    text-align: left;
                    margin-left: 15px;
                    margin-top: 10px;
                }
                    #table .row .col3 b {
                        color: #fff000;
                    }

        .box {
            position: absolute;
            left: 900px;
            top: 400px;
            -webkit-perspective: 600px;
            -ms-perspective: 600px;
        }
    </style>
</head>
<body>
    <div id="container" style="height: 100%"></div>
    <div style="position: absolute; left:0; top: 0;">
        <button onclick="eventShowNone()" style="width:90px; height:40px;">只显示全部</button>
        <button onclick="eventShowCk()" style="width:90px; height:40px;">显示仓库</button>
        <button onclick="eventShowDc()" style="width:90px; height:40px;">显示堆场</button>
        <button onclick="eventShowMt()" style="width:90px; height:40px;">显示码头</button>
    </div>
    <img src="./images/s3-1/label-count.png" style="position: absolute; left: 450px; top: 150px; display: none;" />
    <div style="position:absolute; left:580px; top:130px; display:none;">
        <div><em class="countText" id="countCk">0</em><em>个</em></div>
        <div><em class="countText" id="countDc">0</em><em>个</em></div>
        <div style="margin-left:50px;"><em class="countText" id="countMt">0</em><em>个</em></div>
    </div>

    <div class="box">
        <div class="cube" id="cube">
            <div class="cube-face cube-face-front">码头</div>
            <div class="cube-face cube-face-back">码头</div>
            <div class="cube-face cube-face-right">堆场</div>
            <div class="cube-face cube-face-left">堆场</div>
            <div class="cube-face cube-face-bottom">仓库</div>
            <div class="cube-face cube-face-top">仓库</div>
        </div>
    </div>
    <div style="color: #fff; width: 510px; position: absolute; left: 1400px; top: 65px; display: none;" id="ctlTableRight">
        <div style="font-size: 32px; margin-top: 0px; height: 50px; background-color: #0c0e47;">
            <div id="title" style="font-size: 32px; margin-left: 110px; margin-top: 20px; color: #fff100;">
            </div>
        </div>
        <div style="font-size: 24px; margin-left: 190px; margin-top: 0px; color: #fff100;">组织机构名称</div>
        <div id="table">
        </div>
    </div>
    <div style="height: 100%; width: 420px; height: 80px; position: absolute; left: 100px; top: 50px; color: #fff; font-size: 32px;" id="ctlLabelTime">
    </div>
    <img src="images/s3-3-1/icontimer.png" style="position: absolute; left: 50px; top: 55px;" id="ctlIconTimer" />
    <img src="images/s3-3-1/title.png" style="position: absolute; left: 620px; top: 30px;" id="ctlImgTitle" />
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script type="text/javascript" src="assets/echarts/map/jiangsu.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
    <script src="./content/s3-4-1-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script src="./images/s3-4-1/index.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        var g_provinceCount = null;


        function convertProvinceCountData() {
            var lData = [];
            for (var index = 0; index < g_provinceCount.names.length; index++) {
                lData.push({ name: g_provinceCount.names[index], value: g_provinceCount.values[index] });
            }
            return lData;
        }

        var g_provinceCountTop5Colors = ['#fe2020', '#fe2a2a', '#ff7e28', '#fea41c', '#ffd119', '#ffff18', '#b3e814', '#1ed21e', '#18d118', '#43d943'];
        function convertProvinceCountTop5Data(data) {
            var result = [];
            for (var index = 0; index < data.length; index++) {
                result.push({
                    value: data[index],
                    itemStyle: {
                        normal: {
                            color: g_provinceCountTop5Colors[index]
                        }
                    }
                });
            }
            return result;
        }
        function convertCompanyAreaTop10(data) {
            var result = [];
            for (var index = data.length - 1; index >= 0; index--) {
                result.push({
                    value: data[index],
                    itemStyle: {
                        normal: {
                            color: g_provinceCountTop5Colors[index]
                        }
                    }
                });
            }
            return result;
        }

        var g_topDcColor = ['#ff0000', '#ff2f2f', '#ff4b4b', '#eb6100', '#ff9000', '#a8ff00', '#8fc31f', '#4dae0e', '#00a866', '#088353'];
        function convertTopDc(data) {
            var result = [];
            for (var index = 0; index < data.xValues.length; index++) {
                result.push({
                    value: 10,
                    name: data.xValues[index] + ':' + data.yValues[index] + 'TEU/吨',
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                            borderWidth: 0
                        }
                    }
                });
            }
            result.push({
                value: 9.8, name: '',
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                        borderWidth: 0
                    }
                }
            });
            result.push({
                value: 9.9, name: '',
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(222,0,0,0)',//g_topDcColor[index],
                        borderWidth: 0
                    }
                }
            });
            return result;
        }

        var g_s3MapDcData = null;
        var g_s3MapCkData = null;
        var g_s3MapMtData = null;
        var g_s3MapOrgData = null;
        var g_seriesCk = {
            name: '全国仓库',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-ck.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#0F0',
                }
            }
        };
        var g_seriesDc = {
            name: '全国堆场',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-dc.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#F0F',
                }
            }
        };
        var g_seriesMt = {
            name: '全国码头',
            type: 'scatter',
            symbol: 'image://./images/s3-1/icon-mt.png',
            symbolSize: [24, 39],
            symbolOffset: [-12, -19],
            geoIndex: 0,
            coordinateSystem: 'geo',
            data: [],
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    //borderColor: '#fff',
                    color: '#F00',
                }
            }
        };

        var g_tableDataArr = [];
        var g_tableAreaArr = [['北京', '江苏', '广东'], ['山东', '江苏', '福建'], ['广东', '广西', '江苏']];
        var g_tableCateArr = ['仓库', '堆场', '码头'];
        $.get(jzcode.data.getUrl('./data/s3-map-mt.json'), function (s3MapMtJson) {
            $.get(jzcode.data.getUrl('./data/s3-map-dc.json'), function (s3MapDcJson) {
                $.get(jzcode.data.getUrl('./data/s3-map-ck.json'), function (s3MapCkJson) {
                    $.get(jzcode.data.getUrl('./data/s3-4-table.json'), function (datCkTable) {
                        $.get(jzcode.data.getUrl('./data/s3-5-table.json'), function (datDcTable) {
                            $.get(jzcode.data.getUrl('./data/s3-6-table.json'), function (datMtTable) {
                                g_s3MapDcData = s3MapDcJson;
                                g_s3MapMtData = s3MapMtJson;
                                g_s3MapCkData = s3MapCkJson;

                                g_tableDataArr.push(datCkTable);
                                g_tableDataArr.push(datDcTable);
                                g_tableDataArr.push(datMtTable);

                                //$('#countCk').html(g_s3MapCkData.mapData.length);
                                //$('#countDc').html(g_s3MapDcData.mapData.length);
                                //$('#countMt').html(g_s3MapMtData.mapData.length);
                                option = {
                                    title: {
                                        text: '',
                                        subtext: '',
                                        sublink: '#',
                                        left: 'center',
                                        top: 5,
                                        itemGap: 0,
                                        textStyle: {
                                            color: '#577ceb'
                                        }
                                    },
                                    brush: {
                                        geoIndex: 0,
                                        brushLink: 'all',
                                        inBrush: {
                                            opacity: 1
                                        },
                                        outOfBrush: {
                                            color: '#b99e2a',
                                            symbolSize: 4,
                                            opacity: 0.1
                                        }
                                    },
                                    graphic: {
                                        elements: [{
                                            id: 'layer-map-legend',
                                            type: 'image',
                                            left: 140,
                                            top: 910,
                                            style: {
                                                image: './images/s3-1/s3-1-map-legend.png'
                                            },
                                            z: 3
                                        }]
                                    },
                                    geo: [{
                                        map: 'china',
                                        silent: true,
                                        label: {
                                            emphasis: {
                                                show: false,
                                                areaColor: '#eee'
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                areaColor: '#0009ff',
                                                borderColor: '#fff',
                                                borderWidth: 1,
                                                color: '#fff'
                                            }
                                        },
                                        left: 50,
                                        top: 140,
                                        bottom: 200,
                                        right: 940,
                                        roam: false
                                    }
                                    ],
                                    series: [
                                        {
                                            name: 'iphone3',
                                            type: 'map',
                                            mapType: 'china',
                                            left: 50,
                                            top: 140,
                                            bottom: 200,
                                            right: 940,
                                            label: {
                                                normal: {
                                                    show: true,
                                                    textStyle: {
                                                        color: '#fff',
                                                        fontSize: 20
                                                    },
                                                    formatter: function (value, index) {
                                                        return value.name;
                                                    }
                                                },
                                                emphasis: {
                                                    show: true
                                                }
                                            },
                                            itemStyle: {
                                                normal: {
                                                    areaColor: '#0009ff',
                                                    borderColor: '#fff',
                                                    borderWidth: 1
                                                }, emphasis: {
                                                    areaColor: 'yellow',
                                                    borderColor: '#fff',
                                                    borderWidth: 2
                                                }
                                            }
                                        }, g_seriesCk, g_seriesDc, g_seriesMt]
                                };

                                g_seriesCk.data = g_s3MapCkData.mapData;
                                g_seriesDc.data = g_s3MapDcData.mapData;
                                g_seriesMt.data = g_s3MapMtData.mapData;
                                if (option && typeof option === "object") {
                                    myChart.setOption(option, true);
                                }
                            }, 'json');
                        }, 'json');
                    }, 'json');
                }, 'json');
            }, 'json');
        }, 'json');

        register();

        //码头
        wharf()

        //堆场
        yard()

        //仓库
        wharehouse()

        var g_ltCateIndex = 0;
        var g_areaIndex = 0;
        var g_offset = 0;
        var g_maxRowCount = 16;
        var g_offsetMax = 0;
        function showLoopTable4Ck() {
            g_ltCateIndex = 0;
            g_ltOffset = 0;
            g_areaIndex = 0;
            showListTable();
        }
        function showLoopTable4Dc() {
            g_ltCateIndex = 1;
            g_ltOffset = 0;
            g_areaIndex = 0;
            showListTable();
        }
        function showLoopTable4Mt() {
            g_ltCateIndex = 2;
            g_ltOffset = 0;
            g_areaIndex = 0;
            showListTable();
        }

        var g_timerTableLoop = null;
        var g_tableData = null;
        function hideLoopTable() {
            if (g_timerTableLoop != null) {
                window.clearInterval(g_timerTableLoop);
                g_timerTableLoop = null;
            }
            $('#ctlTableRight').hide();
        }

        function showListTable() {
            $('#ctlTableRight').show();

            var g_datOrgTable = g_tableDataArr[g_ltCateIndex];
            var g_areaArr = g_tableAreaArr[g_ltCateIndex];
            g_offset = 0;
            $('#table').empty();
            for (var index = g_offset; index < g_offset + g_maxRowCount; index++) {
                if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                    $('#table').append('<div class="row" id="row' + index + '"><div class="col1">' + (index + 1) + '</div><div class="col2">'
                        + g_datOrgTable[g_areaArr[g_areaIndex]][index]
                        + '</div><div class="col3">' + g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index] + '</div></div>');
                } else {
                    $('#table').append('<div class="row" id="row' + index + '">-<div class="col1"></div><div class="col2">-</div><div class="col3">-</div></div>');
                }
            }

            if (g_timerTableLoop == null) {
                g_timerTableLoop = window.setInterval(function () {
                    g_tableData = [];
                    g_offset += 5;
                    if (g_offset > g_offsetMax) {
                        // next  area
                        g_areaIndex++;
                        if (g_areaIndex >= g_areaArr.length) {
                            g_areaIndex = 0;
                            g_offset = 0;
                            g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_maxRowCount;
                            $('#title').html(g_areaArr[g_areaIndex] + '地区' + g_tableCateArr[g_ltCateIndex] + '(' + g_datOrgTable[g_areaArr[g_areaIndex]].length + ')个)');

                            option.series[0].data = [{
                                name: g_areaArr[g_areaIndex], value: 1000, selected: true
                            }];
                            myChart.setOption(option);
                        } else {
                            g_offset = 0;
                            g_offsetMax = g_datOrgTable[g_areaArr[g_areaIndex]].length - g_maxRowCount;
                            $('#title').html(g_areaArr[g_areaIndex] + '地区' + g_tableCateArr[g_ltCateIndex] + '(' + g_datOrgTable[g_areaArr[g_areaIndex]].length + ')个)');

                            option.series[0].data = [{
                                name: g_areaArr[g_areaIndex], value: 1000, selected: true
                            }];
                            myChart.setOption(option);
                        }
                        for (var index = g_offset; index < g_offset + g_maxRowCount; index++) {
                            if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                                g_tableData.push([index + 1,
                                    g_datOrgTable[g_areaArr[g_areaIndex]][index]],
                                    g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index]);
                            }
                        }
                    } else {
                        for (var index = g_offset; index < g_offset + g_maxRowCount; index++) {
                            if (index < g_datOrgTable[g_areaArr[g_areaIndex]].length) {
                                g_tableData.push([index + 1,
                                    g_datOrgTable[g_areaArr[g_areaIndex]][index]],
                                    g_datOrgTable[g_areaArr[g_areaIndex] + 'V'][index]);
                            }
                        }
                    }
                    rotateTableRow();
                }, 5000);
            }
        }


        function rotateTableRow() {
            var x = 0;

            var panelArr = [];
            for (var index = 0; index < g_maxRowCount; index++) {
                var rowObj = $('#row' + index);
                panelArr.push(rowObj);
            }
            var flag = true;
            var timer = setInterval(function () {
                if (Math.round(x) >= 90 && flag) {
                    for (var index = 0; index < panelArr.length; index++) {
                        if (index < g_tableData.length) {
                            panelArr[index].find('.col1').html(g_tableData[index][0]);
                            panelArr[index].find('.col2').html(g_tableData[index][1]);
                            panelArr[index].find('.col3').html(g_tableData[index][2]);
                        } else {
                            panelArr[index].find('.col1').html('');
                            panelArr[index].find('.col2').html('');
                            panelArr[index].find('.col3').html('');
                        }
                    }
                    flag = false;
                }
                if (Math.round(x) >= 358) {
                    for (var index = 0; index < panelArr.length; index++) {
                        panelArr[index].css('transform', 'rotateX(360deg)');
                        panelArr[index].css('webkit-transform', 'rotateX(360deg)');
                    }
                    clearInterval(timer);
                    return false;
                } else {
                    x += 2 + (360 - x) / 60;
                    for (var index = 0; index < panelArr.length; index++) {
                        panelArr[index].css('transform', 'rotateX(' + x + 'deg)');
                        panelArr[index].css('webkit-transform', 'rotateX(' + x + 'deg)');
                    }
                }
            }, 25);
        }
    </script>
</body>
</html>